// 1.构造函数，执行设定生成 放大镜实例化对象
class setMagnify{
    constructor(element , imgArr ){
    // 1.存储实参
        this.ele = element;
        this.imgArr = imgArr;

        this.showtime = element.querySelector('.showtime');
        this.showImg = this.showtime.querySelector('img');
        this.cover = element.querySelector('.cover');
        this.list = element.querySelector('.list');
        this.magnify = element.querySelector('.magnify');
        this.ullis;

        // div 左上间距
        this.divLeft = this.ele.offsetLeft;
        this.divTop = this.ele.offsetTop;

        // 左上边框线
        this.divBorderLeft = this.ele.clientLeft;
        this.divBorderTop = this.ele.clientTop;

        // show的占位：内容+padding
        this.showtimeWidth = this.showtime.offsetWidth;
        this.showtimeHeight = this.showtime.offsetHeight;

        // 遮盖层mask 占位 通过css样式获取 宽高+padding+border
        this.coverWidth = parseInt(myGetStyle(this.cover , 'width'))
        this.coverHeight = parseInt(myGetStyle(this.cover , 'height'))
        this.init();
    }
    //2. 入口函数
    init(){
        this.setHTML();
        this.mouse();
        this.click();
        this.move();
        console.log(this.imgArr);
    }
    // 3.动态生成显示区
    setHTML(){
        this.showImg.setAttribute(`src`,`${this.imgArr[0].large}`)
        
        let str = ''
        this.imgArr.forEach((item , key) => {
            str += key === 0 ? `<li class="active"><img name="liImg" num="${key}" src="${item.small}"></li>` : `<li><img name="liImg" num="${key}" src="${item.small}"></li>`
        })
        this.list.innerHTML = str;
        this.magnify.style.backgroundImage = `url('${this.imgArr[0].large}')`
        this.ullis = this.list.querySelectorAll('li')
    }
    //4. 鼠标的移入移出
    mouse(){
       this.showtime.addEventListener('mouseenter' , () => {
            this.cover.style.display = 'block';
            this.magnify.style.display = 'block';
       })
       this.showtime.addEventListener('mouseleave' , () => {
            this.cover.style.display = 'none';
            this.magnify.style.display = 'none';
        })
    }
    // 5.函数方法3:tab切换/选项卡
    click(){
        this.ele.addEventListener('click', e => {
            if(e.target.getAttribute('name') === 'liImg'){
                let index = e.target.getAttribute('num') - 0;
                this.showImg.setAttribute('src',`${this.imgArr[index].large}`) 
                this.magnify.style.backgroundImage=`url(${this.imgArr[index].large})` 
                
                this.ullis.forEach((item) => {
                    item.classList.remove('active')
                })
                e.target.parentNode.classList.add('active')
            }
        })
    }
    //6. 函数方法4:拖拽
    move(){
        this.showtime.addEventListener('mousemove', e => {
            let x = e.pageX - this.divLeft - this.divBorderLeft - this.coverWidth/2;
            let y = e.pageY - this.divTop - this.divBorderTop - this.coverHeight/2;
            
            if(x < 0 ) x = 0;
            if(y < 0 ) y = 0;
            if(x > this.showtimeWidth - this.coverWidth) x = this.showtimeWidth - this.coverWidth
            if(y > this.showtimeHeight - this.coverHeight) y = this.showtimeHeight - this.coverHeight
        
            this.cover.style.top = y + 'px'
            this.cover.style.left = x + 'px'

            let mgX = -x * 800 / 200;
            let mgY = -y * 800 / 200;
             
            this.magnify.style.backgroundPosition = `${mgX}px ${mgY}px`
        })
    }













}
